<template>
    <div class="login-bg">
        <!-- 标题 -->
        <div class="title-logo">
            <div class="login-logo"></div>
            <div class="login-title"></div>
        </div>
        <div class="login-form">
            <div class="login-wrap">
                <div class="title">登录中心</div>
                <!-- 登录弹框 -->
                <div class="form-wrap">
                    <el-form :model="form" :rules="rules" ref="loginForm">
                        <el-form-item prop="username">
                            <el-input class="login-input" v-model="form.username" placeholder="请输入账号">
                                <template #prepend>
                                    <img :src="username" alt="">
                                    <!-- <el-button :icon="Search" /> -->
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input class="login-input" v-model="form.password" placeholder="请输入密码" type="password"
                                show-password>
                                <template #prepend>
                                    <img :src="password" alt="">
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="login-input" type="primary" @click="submit">立即登录 &nbsp; <img :src="rightarrow"
                            alt=""></el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import username from "@/assets/images/username.png"
import password from "@/assets/images/password.png"
import rightarrow from "@/assets/images/rightarrow.png"
import { login } from "@/api/user"
import { useUser } from "@/store/userStore"
const userStore = useUser()
const router = useRouter()
const form = reactive({
    username: "",
    password: ""
})
const rules = reactive({
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const loginForm = ref(null)
function submit() {
    loginForm.value.validate((valid, fields) => {
        if (valid) {
            login({ username: form.username, password: form.password, qzdl: 1 }).then((res) => {
                if (res.status == 'success') {
                    if (res.code == 200) {
                        const { roleid } = res.data
                        if ([3, 4].includes(roleid)) {
                            userStore.setBaseInfo(res.data)
                            router.push('/')
                            ElMessage.success("登录成功")
                        } else {
                            ElMessage.error("该用户暂无权限")
                        }
                    }
                } else {
                    // 已经在其他地方登陆了
                    if (res.code == -102) {
                        ElMessageBox.confirm(
                            '该账号已在其他地方登录，是否继续登录?',
                            '注意',
                            {
                                cancelButtonText: "放弃",
                                confirmButtonText: "继续登录"
                            }
                        ).then((res) => {
                            login({ username: form.username, password: form.password }).then((res) => {
                                if (res.code == 200) {
                                    const { roleid } = res.data
                                    if ([3, 4].includes(roleid)) {
                                        userStore.setBaseInfo(res.data)
                                        router.push('/')
                                        ElMessage.success("登录成功")
                                    } else {
                                        ElMessage.error("该用户暂无权限")
                                    }
                                }
                            })
                        })
                    } else {
                        ElMessage.error(res.msg)
                    }
                }
                // if (res.code == 200) {
                //     const { roleid } = res.data
                //     // 如果是管理员或者是领导
                //     if ([3, 4].includes(roleid)) {
                //         userStore.setBaseInfo(res.data)
                //         router.push('/')
                //         ElMessage.success("登录成功")
                //     } else {
                //         ElMessage.error("该用户暂无权限")
                //     }
                // }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="scss" scoped>
::v-deep(.el-form-item) {
    margin-bottom: 26px;
}

.login-bg {
    position: relative;
    background-image: url('@/assets/images/loginbg.png');
    /* 替换为你的图片地址 */
    background-size: cover;
    /* 使背景图像覆盖整个元素 */
    background-position: center;
    /* 居中显示背景图像 */
    width: 100%;
    /* 全屏高度 */
    height: 100vh;

    .title-logo {
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 230px;
    }

    .login-title {

        width: 540px;
        height: 60px;
        background: url("@/assets/images/loginTitle.png");
    }

    .login-logo {
        width: 120px;
        height: 120px;
        background: url("@/assets/images/logo.png");
    }

    .login-form {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 360px;
        width: 400px;
        height: 360px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0px 2px 20px rgba(54, 76, 102, 0.25);
        backdrop-filter: blur(20px);

        .login-wrap {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            // justify-content: space-around;
            // align-items: center;
            // justify-content: center;
            align-items: center;

            .title {
                margin: 24px 0 41px 0;
                font-size: 24px;
                letter-spacing: 2px;
                color: rgba(126, 138, 148, 1);
            }

        }

    }
}

.login-input {
    width: 280px;
    height: 44px;
}
</style>